<!--
 * @Author: Evan-lian
 * @Date: 2020-08-28 16:04:59
 * @LastEditors  : Evan-lian
 * @LastEditTime : 2020-08-28 16:37:21
 * @Description: 
 -->
<template>
<div>
    <div id="mountNode"></div>
</div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        draw() {
            fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
                .then((res) => res.json())
                .then((data) => {
                    const width = document.getElementById('mountNode').scrollWidth;
                    const height = document.getElementById('mountNode').scrollHeight || 500;
                    const graph = new this.$G6.TreeGraph({
                        container: 'mountNode',
                        width,
                        height,
                        modes: {
                            default: [{
                                    type: 'collapse-expand',
                                    onChange: function onChange(item, collapsed) {
                                        const data = item.get('model').data;
                                        data.collapsed = collapsed;
                                        return true;
                                    },
                                },
                                'drag-canvas',
                                'zoom-canvas',
                            ],
                        },
                        defaultNode: {
                            size: 26,
                            anchorPoints: [
                                [0, 0.5],
                                [1, 0.5],
                            ],
                            style: {
                                fill: '#C6E5FF',
                                stroke: '#5B8FF9',
                            },
                        },
                        defaultEdge: {
                            type: 'cubic-horizontal',
                            style: {
                                stroke: '#A3B1BF',
                            },
                        },
                        layout: {
                            type: 'compactBox',
                            direction: 'LR',
                            getId: function getId(d) {
                                return d.id;
                            },
                            getHeight: function getHeight() {
                                return 16;
                            },
                            getWidth: function getWidth() {
                                return 16;
                            },
                            getVGap: function getVGap() {
                                return 10;
                            },
                            getHGap: function getHGap() {
                                return 100;
                            },
                        },
                    });
                    graph.node(function (node) {
                        return {
                            label: node.id,
                            labelCfg: {
                                offset: 10,
                                position: node.children && node.children.length > 0 ? 'left' : 'right',
                            },
                        };
                    });
                    graph.data(data);
                    graph.render();
                    graph.fitView();
                });

        }
    },
    mounted() {
        this.draw()
    },
    computed: {

    },
    components: {

    }
}
</script>

<style lang='less' scoped >

 
</style>
